<ion-header>
  <ion-toolbar mode="ios" color="care">
    <ion-buttons>
      <ion-back-button defaultHref="/patient-personal-center"></ion-back-button>
    </ion-buttons>
    <ion-title *ngIf="aType==='name'" class="titleFont">{{ 'Name' | translate }}</ion-title>
    <ion-title *ngIf="aType==='englishName'" class="titleFont">{{ 'EnglishName' | translate }}</ion-title>
    <ion-title *ngIf="aType==='age'" class="titleFont">{{ 'Age' | translate }}</ion-title>
    <ion-title *ngIf="aType==='phone'" class="titleFont">{{ 'PhoneNumber' | translate }}</ion-title>
    <ion-title *ngIf="aType==='email'" class="titleFont">{{ 'Email' | translate }}</ion-title>
    <ion-title *ngIf="aType==='passport'" class="titleFont">{{ 'Passport' | translate }}</ion-title>
    <ion-title *ngIf="aType==='MH'" class="titleFont">{{ 'MedicalHistory' | translate }}</ion-title>
    <ion-title *ngIf="aType==='DD'" class="titleFont">{{ 'DiseaseDescription' | translate }}</ion-title>

    <ion-label slot="end" (click)="savePatient()">
      {{ 'Save' | translate }}
    </ion-label>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div style="padding: 20px">
    <div class="diyItemStyle" *ngIf="aType==='name' || aType==='englishName' || aType==='email' || aType==='passport'">
      <ion-input placeholder="{{ 'Name' | translate}}" *ngIf="aType==='name'" [(ngModel)]="aValue"></ion-input>
      <ion-input placeholder="{{ 'EnglishName' | translate}}" *ngIf="aType==='englishName'" [(ngModel)]="aValue"></ion-input>
      <ion-input placeholder="{{ 'Email' | translate}}" *ngIf="aType==='email'" [(ngModel)]="aValue" type="email"></ion-input>
      <ion-input placeholder="{{ 'Passport' | translate}}" *ngIf="aType==='passport'" [(ngModel)]="aValue"></ion-input>
    </div>

    <ion-note *ngIf="aType === 'englishName'">请按照护照上的姓名填写汉语拼音，填写格式为“先名后姓”。</ion-note>

    <ion-item style="width: 100%; display:flex;justify-content:space-between;margin: 0;align-items:center;" *ngIf="aType==='phone' && !!aValue">
      <ion-label>{{ 'Oldtel' | translate }}</ion-label>
      <ion-select cancelText="{{'Cancel' | translate}}" okText="{{'Confirm' | translate}}" [(ngModel)]="countryCode" style="width: 17vw;float:left;font-size: 14px;padding-top:11px;padding-left: 10px;" placeholder="CC">
        <ion-select-option *ngFor="let item of codeArr">{{item}}
        </ion-select-option>
      </ion-select>
      <ion-input class="inputStyle2" style="width:30vw;height: auto;font-size: 18px" disabled="true" [(ngModel)]="aValue"></ion-input>
    </ion-item>

    <ion-item style="margin-top: 1vh;overflow: hidden;width: 100%" *ngIf="aType==='phone' && !!aValue">
      <ion-label>{{ 'Security_Code' | translate }}:</ion-label>
      <ion-input class="inputStyle" style="width:30vw;height: auto;font-size: 18px" [(ngModel)]="phoneCode"></ion-input>
      <ion-button style="width:auto;color: white;font-size: 12px;" size="small" (click)="getCode()"
        [disabled]="!verifyCode.disable">
        {{verifyCode.verifyCodeTips | translate}}
      </ion-button>
    </ion-item>

    <ion-item style="margin-top: 1vh;overflow: hidden;width: 100%" *ngIf="aType==='phone' && !!aValue">
      <ion-label>{{ 'Newtel' | translate }}</ion-label>
      <ion-input class="inputStyle" style="width:30vw;height: auto;font-size: 18px" [(ngModel)]="newTel"></ion-input>
    </ion-item>

    <ion-item *ngIf="aType==='MH'" style="margin-top: 5vh">
      <ion-textarea [(ngModel)]="aValue" auto-grow='true'></ion-textarea>
    </ion-item>
    <ion-item *ngIf="aType==='DD'" style="margin-top: 5vh">
      <ion-textarea [(ngModel)]="aValue" auto-grow='true'></ion-textarea>
    </ion-item>

    <ion-item *ngIf="aType==='age'">
      <ion-datetime displayFormat="YYYY-MM-DD" picker-format="YYYY MM DD" placeholder="{{ 'Birthday' | translate}}"
        (ionChange)="getBirthday($event)" value="aValue"></ion-datetime>
    </ion-item>


    <div class="inputBoxOne" *ngIf="aType === 'phone' && !aValue">
      <div class="inputBox" style="width: 75vw">
          <img src="./../../../../assets/img/iconphone.png" alt="" class="iconStyle">
          <ion-select cancelText="{{'Cancel' | translate}}" okText="{{'Confirm' | translate}}" [(ngModel)]="countryCode" style="width: 17vw;float:left;font-size: 14px;padding-top:11px;padding-left: 0px;" placeholder="CC">
            <ion-select-option *ngFor="let item of codeArr">{{item}}
            </ion-select-option>
          </ion-select>
          <ion-input placeholder="{{ 'Phone' | translate }}" clearInput class="inputPhoneStyle" [(ngModel)]="phoneNum"></ion-input>
      </div>
      <div class="inputBox" style="margin-top: 1vh;width: 75vw">
          <img src="./../../../../assets/img/iconmessage.png" alt="" class="iconStyle">
          <ion-input placeholder="{{ 'Security_Code' | translate }}" clearInput class="inputStyle" style="width:calc(100% - 34vw)" [(ngModel)]="phoneCode"></ion-input>
          <ion-button color="care" style="width:calc(100% - 52vw);color: white;font-size: 12px;" size="small" (click)="getPhoneCode()" [disabled]="!verifyCode.disable">
            {{verifyCode.verifyCodeTips | translate}}
          </ion-button>
      </div>
      <div class="inputBox" style="margin-top: 1vh;width: 75vw">
          <img src="./../../../../assets/img/iconpassword.png" alt="" class="iconStyle">
          <ion-input placeholder="{{ 'Password' | translate }}" clearInput class="inputStyle" [(ngModel)]="password"></ion-input>
      </div>
      <div class="inputBox" style="margin-top: 1vh;width: 75vw">
          <img src="./../../../../assets/img/iconpassword.png" alt="" class="iconStyle">
          <ion-input placeholder="{{ 'Confirm Password' | translate }}" clearInput class="inputStyle" [(ngModel)]="confirm"></ion-input>
      </div>
      <ion-button shape="round" color="care" expand="block" class="defaultButton" style="margin-top: 40px;width: 75vw" (click)="registerIme()">{{ 'BindPhone' | translate }}</ion-button>
  </div>

  </div>
</ion-content>
